---
title: Vue
description: Règles de linting spécifiques à Vue.js pour Ultracite.
---

La configuration Vue contient des règles de linting spécifiques à Vue.js pour la structure des composants, les options data, les propriétés calculées et les mots-clés réservés. Elle inclut également des remplacements pour éviter des faux positifs de linting dans les fichiers `.vue`.

## Installation

Ajoutez la configuration Vue à votre `biome.jsonc` :

```jsonc title="biome.jsonc"
{
  "extends": ["ultracite/core", "ultracite/vue"]
}
```

## Aperçu

Cette configuration ajoute des règles spécifiques au développement Vue.js :

- **Prise en charge HTML** : Active la prise en charge HTML expérimentale complète avec indentation des sections script et style
- **Nommage des composants** : Imposer des noms de composants composés de plusieurs mots
- **Structure des données** : Empêcher les déclarations incorrectes de l'option `data`
- **Mots-clés réservés** : Interdire l'utilisation des props et clés réservées de Vue
- **Clés en double** : Empêcher les clés dupliquées dans les options de composant
- **Props spécifiques à React** : Interdire les props spécifiques à React dans les composants Vue
- **Remplacements pour fichiers Vue** : Règles assouplies pour les fichiers `.vue` afin de gérer la structure des Single File Components

## Configuration du formateur HTML

Le preset Vue active la prise en charge HTML expérimentale avec un formatage spécial pour les scripts et styles intégrés :

```jsonc
{
  "html": {
    "experimentalFullSupportEnabled": true,
    "formatter": {
      "indentScriptAndStyle": true
    }
  }
}
```

Cette configuration :
- **Prise en charge expérimentale complète** : Active les capacités expérimentales d'analyse et de formatage HTML de Biome pour les fichiers `.vue`
- **Indentation des scripts et styles** : Indente correctement le code à l'intérieur des balises `<script>` et `<style>` dans les Single File Components Vue

## Règles spécifiques à Vue

### En développement

| Règle | Paramètre | Description |
|------|---------|-------------|
| `noVueDataObjectDeclaration` | `error` | Empêche l'utilisation d'une déclaration d'objet pour l'option `data` dans les composants Vue. L'option `data` doit être une fonction qui retourne un objet. |
| `noVueDuplicateKeys` | `error` | Empêche les clés dupliquées dans les options des composants Vue. Les clés dans `data`, `computed`, `methods`, etc. doivent être uniques. |
| `noVueReservedKeys` | `error` | Interdit les clés réservées de Vue comme `$data`, `$props`, `$el`, etc. dans les options de composant. |
| `noVueReservedProps` | `error` | Interdit les props réservées de Vue comme `key`, `ref` et `is` en tant que props personnalisées de composant. |
| `noVueVIfWithVFor` | `error` | Interdit l'utilisation conjointe de `v-for` et `v-if` sur le même élément. |
| `useVueHyphenatedAttributes` | `error` | Encourage l'utilisation du kebab-case pour les noms d'attributs, conformément aux recommandations du guide de style de Vue. |
| `useVueMultiWordComponentNames` | `error` | Imposer des noms de composants composés de plusieurs mots pour éviter les conflits avec les éléments HTML. Les noms d'un seul mot comme `Button` ou `Card` doivent être évités. |
| `useVueValidVBind` | `error` | Vérifie la validité des directives `v-bind` dans les fichiers Vue. |
| `useVueValidVElseIf` | `error` | Vérifie la validité des directives `v-else-if` dans les templates Vue. Signale les directives invalides dépourvues d'expressions conditionnelles ou lorsqu'elles ne sont pas précédées d'une directive `v-if` ou `v-else-if`. |
| `useVueValidVElse` | `error` | Vérifie la validité des directives `v-else` dans les templates Vue. Signale les directives qui ne sont pas précédées d'une directive `v-if` ou `v-else-if`. |
| `useVueValidVHtml` | `error` | Vérifie l'utilisation correcte de la directive `v-html` dans les templates Vue. Signale les directives sans expression, avec des arguments inattendus ou des modificateurs inattendus. |
| `useVueValidVIf` | `error` | Vérifie la validité des directives `v-if` dans les templates Vue. Interdit les arguments et les modificateurs, et s'assure qu'une valeur est fournie. |
| `useVueValidVOn` | `error` | Vérifie la validité des directives `v-on` dans les templates Vue. Signale les directives `v-on` / raccourci `@` invalides avec noms d'événements manquants, modificateurs invalides ou expressions de gestionnaire manquantes. |
| `useVueValidVText` | `error` | Vérifie la validité des directives `v-text` dans les templates Vue. La règle signale lorsque `v-text` a un argument, des modificateurs, ou est dépourvu de valeur. |

### Suspicieux

| Règle | Paramètre | Description |
|------|---------|-------------|
| `noReactSpecificProps` | `error` | Interdit les props spécifiques à React comme `className` et `htmlFor` dans Vue. Utilisez `class` et `for` à la place. |

## Remplacements pour fichiers Vue

Les règles suivantes sont désactivées pour les fichiers `.vue` afin d'éviter des faux positifs dus au support partiel de Biome pour les Single File Components Vue :

### Exactitude

| Règle | Paramètre | Description |
|------|---------|-------------|
| `noUnusedVariables` | `off` | Autoriser les variables non utilisées dans les fichiers `.vue`. Les variables dans la section script peuvent n'être utilisées que dans le template. |
| `noUnusedImports` | `off` | Autoriser les imports non utilisés dans les fichiers `.vue`. Les imports peuvent n'être utilisés que dans la section template. |

### Style

| Règle | Paramètre | Description |
|------|---------|-------------|
| `useConst` | `off` | Autoriser les déclarations `let` et `var` dans les fichiers `.vue` pour les patterns de données réactives. |
| `useImportType` | `off` | Désactiver l'obligation de types d'import explicites pour une meilleure compatibilité avec le système de build de Vue. |